<template>
<div>
  <div class="steps">
    <el-steps :active="active" finish-status="success">
      <el-step title="商品类型" :description="chooseShopTypeText"></el-step>
      <el-step title="基础表单"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="sku属性,库存"></el-step>
      <el-step title="确认表单"></el-step>
      <el-step title="添加结果"></el-step>
    </el-steps>
  </div>
<!--  商品类型-->


  <div v-if="active==0">
    <div class="shopType">
      <div style="height: 1px"></div>
      <div class="choose-item"  :class="index==chooseShopActiv?'choose-item-choose':''" v-for="(item , index) in typeList" @click="chooseShopType(index,item.name)">
        <div style="width: 100%;height: 70px;">
          <img :src="item.image" alt="" style="width: 100%;height: 70px;">
        </div>
        <p class="shop-type-name" :class="index==chooseShopActiv?'shop-type-name-choose':''">{{item.name}}</p>
      </div>
    </div>
    <div style="line-height: 0">
      <el-button style="margin-top: 12px;" @click="shopType" type="success">下一步</el-button>
    </div>
  </div>
<!--  基础表单-->


  <div v-if="active==1">
    <div class="shop-form">
        <div style="width: 50%;margin: 0 auto">
          <el-form ref="form" :model="shopForm" label-width="80px">
            <el-form-item label="商品标题">
              <el-input v-model="shopForm.title"></el-input>
            </el-form-item>
            <el-form-item label="品牌">
              <el-input v-model="shopForm.brand"></el-input>
            </el-form-item>
            <el-form-item label="店铺">
              <el-input v-model="shopForm.store"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="shopForm.name"></el-input>
            </el-form-item>
          </el-form>
          <p>商品图片</p>
          <div class="upload-img">
            <div class="upload-item" v-if="image == null">
<!--              <div class="upload-style" for="upload"></div>-->
              <label class="input-file-button" for="upload"> <div>
                <el-icon class="el-icon-upload" style="font-size: 30px;line-height: 150px"></el-icon>
              </div></label>
              <input type="file" class="file-updoad" id="upload" @change="uploadImg($event)">
            </div>
            <img :src="image" alt=""v-if="image != null" style="height: 150px;width: 150px;border-radius: 10px">
          </div>
        </div>
    </div>
    <div style="line-height: 0">
      <el-button style="margin-top: 12px;" @click="back(0)" type="warning">返回修改</el-button>
      <el-button style="margin-top: 12px;" @click="submitShopForm" type="success">下一步</el-button>
    </div>
  </div>


<!--  商品属性，参数-->
  <div v-if="active==2">
    <div class="param-cont">
      <div style="width: 50%;margin: 0 auto">
        <el-form ref="form" :model="paramForm" label-width="80px">
          <el-form-item label="上市日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="paramForm.time" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="商品产地">
            <el-input  placeholder="产地" v-model="paramForm.location" style="width: 100%;" />
          </el-form-item>
          <p style="color:#ff2e2e;">非必须</p>
          <div class="item1">
            <div style="height: 10px"></div>
          <div style="width: 70%;margin: 0 auto">
           <p v-for="(item, index) in paramList" style="display: flex;" >
             <el-input v-model="item.key" placeholder="key"></el-input><span style="width: 40px"></span><el-input v-model="item.value" placeholder="value"></el-input>
             <span style="width: 10px;"></span>
             <el-button type="danger" icon="el-icon-delete" circle @click="deleteForm(index)"></el-button>
           </p>
            <el-button type="success" icon="el-icon-plus" circle @click="addForm"></el-button>
            <div style="height: 20px;"></div>
          </div>
          </div>
        </el-form>
      </div>
    </div>
    <div style="line-height: 0">
      <el-button style="margin-top: 12px;" @click="back(1)" type="warning">返回修改</el-button>
      <el-button style="margin-top: 12px;" @click="shopParam" type="success">下一步</el-button>
    </div>
  </div>

<!--  skuAttr 商品属性-->
    <div v-if="active==3">
      <div class="param-cont sku-item">
        <div class="skuTitle">
          <div>样式</div>
          <div>型号</div>
          <div>价格</div>
          <div>库存</div>
        </div>
        <p style="display: flex; margin: 10px auto;" v-for="(item , index) in skuForm">
          <el-input  placeholder="样式" v-model="item.style"></el-input>
          <el-input  placeholder="型号" style="margin-left: 20px" v-model="item.size"></el-input>
          <el-input  placeholder="价格" style="margin-left: 20px" v-model="item.price"></el-input>
          <el-input  placeholder="库存" style="margin-left: 20px" v-model="item.ware"></el-input>
          <el-button type="danger" plain @click="deleleSkuForm(index)">删除</el-button>
        </p>
        <p>
          <el-button type="success" plain @click="addSkuForm">添加表单</el-button>
        </p>
      </div>
      <div style="line-height: 0">
        <el-button style="margin-top: 12px;" @click="back(2)" type="warning">返回修改</el-button>
        <el-button style="margin-top: 12px;" @click="skuFormActiv" type="success">下一步</el-button>
      </div>
    </div>
<!--  确定表单,提交-->
  <div v-if="active==4">
    <h3 style="line-height: 0">确定表单</h3>
    <div class="suForm">
      <p>标题：{{shopForm.title}}</p>
      <p>名称：{{shopForm.name}}</p>
      <p>店铺：{{shopForm.store}}</p>
      <p>类型：{{chooseShopTypeText}}</p>
      <p>上市日期：{{paramForm.time}}</p>
      <p>------------------------库存-------------------------</p>
      <div style="width: 70%;margin: 0 auto;">
        <div style="display: flex;margin: 5px auto;width: 100%;" v-for="item in skuForm">
          <p>样式：{{item.style}}</p><p style="width: 10px"></p>
          <p>型号：{{item.size}}</p><p style="width: 10px"></p>
          <p>价格：{{item.price}}</p><p style="width: 10px"></p>
          <p>库存：{{item.ware}}</p><p style="width: 10px"></p>
        </div>
      </div>
    </div>
    <div style="line-height: 0">
      <el-button style="margin-top: 12px;" @click="back(3)" type="warning">返回修改</el-button>
      <el-button style="margin-top: 12px;" @click="addShopAudit" type="warning">提交添加申请</el-button>
    </div>
  </div>
  <div v-if="active==6">
    <div style="height: 100px"></div>
    <div style="margin: 0 auto">
      <img src="https://shop-wangxiang.oss-cn-chengdu.aliyuncs.com/image/success.png" style="width: 150px;height: 150px">
    </div>
    <div style="margin: 0 auto;font-size: 30px;color:#20b759;line-height: 0">{{count}}s 后返回！</div>
  </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import myUploald from "../../utils/myUploald";
import store from '@/store/index'
import ElementUI from "_element-ui@2.15.6@element-ui";
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
  count:10,
  active: 0,
  typeList:[],
  chooseShopActiv:10000,
  chooseShopTypeText:null,
  shopForm:{
    title:null,
    image:null,
    brand:null,
    name:null,
    store:null,
    price:null
  },
  paramForm:{
    time:null,
    location:null
  },
  paramList:[{key:null,value:null}],
  skuForm:[{style:null,size:null,price:null,ware:null}],

};
},
//计算属性 类似于data概念
computed: {
  image(){
   return store.state.common.uploaldFile
  }
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  getShopTypeList() {
    this.$http({
      url:"product/shoptype/three",
      method:"get"
    }).then((res)=>{
      this.typeList = res.data.list
    })
  },
  shopType(){
   if (this.chooseShopTypeText==null){
     this.$message({
       message:"你还未选择商品类型",
       type:'error'
     })
   }else {
     this.active = 1
   }
  },
  chooseShopType(index,item){
    this.chooseShopActiv = index
    this.chooseShopTypeText = item
  },
  submitShopForm(){
    if (this.shopForm.title==null|this.shopForm.store==null|this.shopForm.store==null|this.shopForm.name==null|this.image==null){
      this.$message({
        message:"改步骤有表单没填写，或者未上传商品图片",
        type:'error'
      })
    }else {
      this.active = 2
    }
  },
  uploadImg(file){
    if(file.target.files[0].type=="image/jpeg"|file.target.files[0].type=="image/png"){
      myUploald.uploald(file.target.files[0])
    }else {
      ElementUI.Message({
        message: "请选择图片，暂不支持其他格式",
        type: "error"
      })
    }
  },
  addForm(){
    this.paramList.push({key:null,value:null})
  },
  deleteForm(index){
    console.log(index)
    this.paramList.splice(index,1)
  },
  shopParam(){
    if (this.paramForm.time==null|this.paramForm.location==null){
      this.$message({
        message: "必须选择上市日期和商品产地",
        type:"error"
      })
    }else {
      this.active=3
    }
  },
  addSkuForm(){
    this.skuForm.push({style:null,size:null,price:null,ware:null})
  },
  deleleSkuForm(index){

    this.skuForm.splice(index,1)
  },
  skuFormActiv(){
    if (this.skuForm.length==0){
      this.$message({
        message:"你并没有表单",
        type:'error'

      })
    }else {
      if (this.skuForm[0].style==null){
        this.$message({
          message:"至少添加一项库存，并按顺序填写",
          type:'error'

        })
      }else {
        this.active = 4
      }
    }

  },
  addShopAudit(){
    var that = this
    this.$http({
      url:"product/spu/add/audit",
      method:"post",
      data:{
        shopType:this.chooseShopTypeText,
        shopTitle:this.shopForm.title,
        shopBrand:this.shopForm.brand,
        shopStore:this.shopForm.store,
        shopName:this.shopForm.name,
        shopTime:this.paramForm.time,
        shopImage:this.image,
        paramList:this.paramList,
        skuList:this.skuForm,
        shopLocation:this.paramForm.location,
        userId:sessionStorage.getItem("userId")
      }
    }).then((res)=>{
      if (res.data.code==800){
        this.active = 6
        this.chooseShopTypeText=null
        this.shopForm.title=null
        this.shopForm.brand=null
        this.shopForm.store=null
        this.shopForm.name=null
        this.paramForm.time=null
        this.paramList=null
        this.skuForm=null
        this.paramForm.location=null
        store.commit("uploaldFile",null)
        const timeUtils = setInterval(function (){
          if (that.count==0){
            clearInterval(timeUtils)
            that.active=0
          }
          if (that.count!=0){
            that.count--

          }


        },1000)




      }
    })






  },
  back(indexActiv){
    this.active = indexActiv
  },
  countTime(){
    for (let i =  this.count; i =>0; i--) {
      this.count = i
    }
  }

},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.getShopTypeList()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.steps{
  line-height: 0;
  width: 90%;
  margin: 0 auto;
}
.shopType{
  display: flex;
  width: 95%;
  line-height: 0;

  margin: 0 auto;
  flex-flow: wrap;
  /*background-color: #78a56e;*/
}
.choose-item{
  margin: 10px;
  width: 70px;
  height: 90px;
  overflow: hidden;
  border-radius: 7px;
  border: 3px solid #f1dac7;
  /*background-color: #08AEEA;*/
}
.shop-type-name{
  /*background-color: red;*/
  height: 20px;
  line-height: 20px;
  margin: 0;
  color: #aaaaaa;
  font-size: 12px
}
.choose-item-choose{
  border: 3px solid #32ce16;

}
.shop-type-name-choose{
  color: #2AF598;
}
.shop-form{
  margin: 12px auto;
  width: 90%;
  line-height: 0;
}
.upload-img{
  margin: 0 auto;
  width: 150px;
  overflow: hidden;
  height: 150px;
  border: 2px solid #9ec774;
  border-radius: 10px;
  /*background-color: #2AF598;*/
}
.file-updoad{
  /*font-size: 110px;*/
  /*opacity: 0;*/
  display: none;
}
.input-file-button>div{
  width: 150px;
  height: 150px;
  /*background-color: red;*/
}
.param-cont{
  margin: 12px auto;
  width: 90%;
  line-height: 0;
}
.item1{
  width: 100%;
  /*height: 400px;*/
  max-height: 400px;
  overflow-y: auto;
  border: 1px dashed forestgreen;
}
.sku-item{
  border: 1px dashed forestgreen;
  max-height: 500px;
  overflow-y: auto;
}
.skuTitle{
  width: 100%;
  height: 50px;
  margin: 10px auto;
}
.skuTitle>div{
  width: 25%;
  /*margin-left: 3px;*/
  display: inline-block;
  height: 50px;
  text-align: center;
  line-height: 50px;
  /*background-color: red;*/
}
.suForm{
  margin: 12px auto;
  width: 70%;
  /*height: 700px;*/
  max-height: 700px;
  overflow-y: auto;
  line-height: 0;
  border: 2px dashed #a5a3a3;
  /*background-color: #2AF598;*/
}

</style>
